<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>

<template>
  <div>
    <Row :gutter="10">
      <Card>
        <div class="table-head">
          <Button type="primary" class="Button" @click="ExportData()">导出数据</Button>
          <Button type="primary" class="Button" @click="importData()">导入数据</Button>
          <a href="/vendors/Excel/ratepaying.xlsx" download="企业纳税导入模板.xlsx">
            <Button type="primary" class="Button">下载模板</Button>
          </a>
        </div>
        <Row class="margin-top-10">
          <Table stripe border :columns="columns" :data="data" @on-row-click="onRowData"
                 @on-selection-change="selectionChange"></Table>
        </Row>
        <div style="margin: 10px;overflow: hidden;height: 36px;">
          <div style="float: right;">
            <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
          </div>
        </div>
      </Card>
      <!--详情-->
      <Modal :width="600" title="详情"
             v-model="showCurrentTableData"
             ok-text="确定"
             cancel-text="取消"
             @on-ok=""
             @on-cancel=""
             class-name="vertical-center-modal"
             class="Modal-Detail-div">
        <div class="detail-div" v-if="showCurrentTableData == true"
             v-for="(el,index) in dataDetail" :key="index">
          <div class="pie-div margin-top-8" v-if="el.type == 'pie'">
            <data-source-pie
                :visite_volume_id="el.div_id"
                :xDataTitle="el.title"
                :xDataArr="el.xArr"
                :yDataArr="el.yArr"
            ></data-source-pie>
          </div>
          <Table stripe border v-if="el.type == 'table'" class="margin-top-8"
                 :columns="el.dataDetail_columns" :data="el.dataDetail_table"></Table>
          <div class="pie-div margin-top-8" v-if="el.type == 'timeline'">
            <data-timeline
                :visite_volume_id="el.div_id"
                :xDataTitle="el.title"
                :dataArr="el.timelineData"
            ></data-timeline>
          </div>
          <div class="pie-div margin-top-8" v-if="el.type == 'bar'">
            <visite-volume
                :visite_volume_id="el.div_id"
                :xDataTitle="el.title"
                :xDataArr="el.xArr"
                :yDataArr="el.yArr"
            ></visite-volume>
          </div>
          <div class="pie-div margin-top-8" v-if="el.type == 'line'">
            <echarts-line
                :visite_volume_id="el.div_id"
                :xDataTitle="el.title"
                :xDataArr="el.xArr"
                :yDataArr="el.yArr"
            ></echarts-line>
          </div>
        </div>
      </Modal>
      <!--导入-->
      <Modal v-model="importDataModal" :width="600" :mask-closable="false" :closable="false"
             class-name="vertical-center-modal" class="Modal-Detail-div">
        <h3 slot="header" style="color:#2D8CF0">导入信息</h3>
        <Form label-position="top">
          <FormItem label="上传附件">
            <div class="dataDetail-div chooseUser accessory">
              <div class="users" v-for="el in importDataArr">
                <span class="span-name" v-text="el.name"></span>
                <span class="span-icon" @click="delimportData(el)">
                  <Icon type="close-round"></Icon>
                </span>
              </div>
              <Upload v-if="importDataArr.length == 0"
                      :before-upload="handleUpload" action="">
                <Button icon="ios-cloud-upload-outline">选择文件</Button>
              </Upload>
            </div>
          </FormItem>
          <FormItem label="预览" v-if="ImportData.length > 0">
            <div class="dataDetail-div dataDetail-div-padding-0">
              <Table stripe border :columns="ImportDataColumns" :data="ImportData" height="360"></Table>
            </div>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="hideImportDataModal">取消</Button>
          <Button type="primary" :loading="saveLoading" @click="saveImportData()">确定</Button>
        </div>
      </Modal>
    </Row>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  import dataSourcePie from '../home/components/dataSourcePie.vue';
  import dataTimeline from '../home/components/dataTimeline.vue';
  import visiteVolume from '../home/components/visiteVolume.vue';
  import echartsLine from '../home/components/echartsLine.vue';
  export default {
    components: {
      dataSourcePie,
      dataTimeline,
      visiteVolume,
      echartsLine,
    },
    data () {
      return {
        total: 0,
        page: 1,
        size: 10,
        id: '',
        searchConName: '',
        searchConTel: '',
        showCurrentTableData: false,
        loading: true,
        showCurrentColumns: [],
        editInlineAndCellData: [],
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            key: 'title',
            title: '标题',
          },
          {
            key: 'create_time',
            title: '时间',
          },
        ],
        data: [],
        dataDetail: {},
        dataDetail_columns: [],
        initTable: [],
        format: Util.constant.format,
        addCurrentTableData: false,
        saveLoading: false,
        ajaxType: 'add',
        addData: {
          content: '',
          anonymous: false,
          accessory: [],
        },
        selectionArr: [],
        importDataModal: false,
        importDataArr: [],
        ImportDataColumns: [],
        ImportData: [],
      };
    },
    mounted () {
      this.getData();
    },
    methods: {
      getData () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          page: _this.page,
          size: _this.size,
        };
        var params = {
          url: '/sd/corp/taxes/list',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.total = res.rows;
            _this.data = _data;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      handleSearch () {
        var _this = this;
        _this.page = 1;
        var searchConName = _this.searchConName;
      },
      changePage (page) {
        var _this = this;
        console.log('page', page);
        _this.page = page;
        _this.getData();
      },
      onRowData: function (data, index) {
        var _this = this;
        _this.show(index, data);
      },
      show: function (index, data) {
        var _this = this;
        var id = data.id;
        _this.id = id;

        var data = {
          id: _this.id,
        };
        var params = {
          url: '/sd/corp/taxes/query',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            var dataDetail = [];
            for (var k in _data) {
              if (!_data[k]) {
                continue;
              }
              var id = _data[k].id;
              var type = _data[k].type;// pie, timeline, table, bar, line
              var unit = _data[k].unit;
              var title = _data[k].title;
              var legend = _data[k].legend;

              var xArr = [];
              var yArr = [];
              var dataDetail_columns = [];
              var dataDetail_table = [];
              var timelineData = {};
              if (type == 'pie') {
                var list = _data[k].list;
                for (var i in list) {
                  if (!list[i]) {
                    continue;
                  }
                  var list_id = list[i].id;
                  var list_name = list[i].name;
                  var list_value = list[i].value;
                  var list_obj = {
                    id: list_id,
                    name: list_name,
                    value: list_value,
                  };
                  xArr.push(list_name);
                  yArr.push(list_obj);
                }
              } else if (type == 'bar') {
                var list = _data[k].list;
                for (var i in list) {
                  if (!list[i]) {
                    continue;
                  }
                  var list_name = list[i].name;
                  var list_value = list[i].value;
                  xArr.push(list_name);
                  yArr.push(list_value);
                }
              } else if (type == 'line') {
                var list = _data[k].list;
                for (var i in list) {
                  if (!list[i]) {
                    continue;
                  }
                  var list_name = list[i].name;
                  var list_value = list[i].value;
                  xArr.push(list_name);
                  yArr.push(list_value);
                }
              } else if (type == 'timeline') {
                var counties = _data[k].counties;
                //*********************************************************************
                counties = {
                  "counties": [
                    "大润发洪楼店",
                    "新世纪电影城洪楼店",
                    "美特斯邦威洪楼店",
                    "银座超市洪楼店",
                    "皇宫大酒店"
                  ],
                  "timeline": [
                    2009,
                    2010,
                    2011,
                    2012,
                    2013,
                    2014,
                    2015,
                    2016,
                    2017
                  ],
                  "series": [
                    [
                      [
                        32511,
                        159,
                        100,
                        "新世纪电影城洪楼店",
                        2009
                      ],
                      [
                        14036,
                        150,
                        50,
                        "大润发洪楼店",
                        2009
                      ],
                      [
                        16064.95,
                        107,
                        32.1299,
                        "皇宫大酒店",
                        2009
                      ],
                      [
                        11621.8,
                        45,
                        23.2436,
                        "美特斯邦威洪楼店",
                        2009
                      ],
                      [
                        8263,
                        79,
                        16.5260,
                        "银座超市洪楼店",
                        2009
                      ]
                    ],
                    [
                      [
                        39011,
                        161,
                        110,
                        "新世纪电影城洪楼店",
                        2010
                      ],
                      [
                        20000,
                        150,
                        63,
                        "大润发洪楼店",
                        2010
                      ],
                      [
                        20814.95,
                        107,
                        50,
                        "皇宫大酒店",
                        2010
                      ],
                      [
                        14121.7,
                        45,
                        28.2434,
                        "美特斯邦威洪楼店",
                        2010
                      ],
                      [
                        8763,
                        79,
                        17.5260,
                        "银座超市洪楼店",
                        2010
                      ]
                    ],
                    [
                      [
                        44011.4,
                        170,
                        110,
                        "新世纪电影城洪楼店",
                        2011
                      ],
                      [
                        24036.35,
                        160,
                        68,
                        "大润发洪楼店",
                        2011
                      ],
                      [
                        22314.95,
                        50,
                        50,
                        "皇宫大酒店",
                        2011
                      ],
                      [
                        15621.7,
                        45,
                        31.2434,
                        "美特斯邦威洪楼店",
                        2011
                      ],
                      [
                        9763,
                        79,
                        19.5260,
                        "银座超市洪楼店",
                        2011
                      ]
                    ],
                    [
                      [
                        49140.7,
                        160,
                        120,
                        "新世纪电影城洪楼店",
                        2012
                      ],
                      [
                        24639.5,
                        180,
                        69,
                        "大润发洪楼店",
                        2012
                      ],
                      [
                        23118.95,
                        50,
                        50,
                        "皇宫大酒店",
                        2012
                      ],
                      [
                        15641.7,
                        45,
                        31.2834,
                        "美特斯邦威洪楼店",
                        2012
                      ],
                      [
                        10630.2,
                        79,
                        21.2604,
                        "银座超市洪楼店",
                        2012
                      ]
                    ],
                    [
                      [
                        54140.7,
                        180,
                        120,
                        "新世纪电影城洪楼店",
                        2013
                      ],
                      [
                        27639.5,
                        180,
                        75,
                        "大润发洪楼店",
                        2013
                      ],
                      [
                        28399,
                        120,
                        50,
                        "皇宫大酒店",
                        2013
                      ],
                      [
                        26617.3,
                        165,
                        53.2346,
                        "美特斯邦威洪楼店",
                        2013
                      ],
                      [
                        13630.2,
                        59,
                        27.2604,
                        "银座超市洪楼店",
                        2013
                      ]
                    ],
                    [
                      [
                        74140.7,
                        200,
                        130,
                        "新世纪电影城洪楼店",
                        2014
                      ],
                      [
                        52951,
                        200,
                        85,
                        "大润发洪楼店",
                        2014
                      ],
                      [
                        32990.2,
                        179,
                        50,
                        "皇宫大酒店",
                        2014
                      ],
                      [
                        34117.3,
                        75,
                        60,
                        "美特斯邦威洪楼店",
                        2014
                      ],
                      [
                        17630.2,
                        65,
                        35.2604,
                        "银座超市洪楼店",
                        2014
                      ]
                    ],
                    [
                      [
                        94593.95,
                        210,
                        130,
                        "新世纪电影城洪楼店",
                        2015
                      ],
                      [
                        62991,
                        200,
                        95,
                        "大润发洪楼店",
                        2015
                      ],
                      [
                        33522.8,
                        193,
                        50,
                        "皇宫大酒店",
                        2015
                      ],
                      [
                        44311.55,
                        129,
                        60,
                        "美特斯邦威洪楼店",
                        2015
                      ],
                      [
                        19204.75,
                        113,
                        38,
                        "银座超市洪楼店",
                        2015
                      ]
                    ],
                    [
                      [
                        94593.95,
                        200,
                        150,
                        "新世纪电影城洪楼店",
                        2016
                      ],
                      [
                        62991,
                        200,
                        90,
                        "大润发洪楼店",
                        2016
                      ],
                      [
                        40522.8,
                        167,
                        50,
                        "皇宫大酒店",
                        2016
                      ],
                      [
                        50311.55,
                        80,
                        60,
                        "美特斯邦威洪楼店",
                        2016
                      ],
                      [
                        19204.75,
                        63,
                        41,
                        "银座超市洪楼店",
                        2016
                      ]
                    ],
                    [
                      [
                        123396.6,
                        220,
                        150,
                        "新世纪电影城洪楼店",
                        2017
                      ],
                      [
                        82602,
                        200,
                        90,
                        "大润发洪楼店",
                        2017
                      ],
                      [
                        38528.65,
                        200,
                        50,
                        "皇宫大酒店",
                        2017
                      ],
                      [
                        55155.7,
                        80,
                        110.3100,
                        "美特斯邦威洪楼店",
                        2017
                      ],
                      [
                        20475,
                        63,
                        40.9500,
                        "银座超市洪楼店",
                        2017
                      ]
                    ]
                  ]
                };
                //*********************************************************************
                timelineData = counties;
              } else if (type == 'table') {
                var table = _data[k].table;
                var title_data = table.data || [];
                var title_title = table.title || [];
                if (title_data.length > 0) {
                  var title_obj = title_data[0];
                  var keyArr = Object.keys(title_obj);
                  for (var t = 0; t < keyArr.length; t++) {
                    if (!keyArr[t]) {
                      continue;
                    }
                    var t_key = keyArr[t];
                    var t_title = title_title[t];
                    var columns_obj = {
                      key: t_key,
                      title: t_title,
                    };
                    dataDetail_columns.push(columns_obj);
                  }
                }
                dataDetail_table = title_data;
              }
              var timestamp = new Date().getTime();
              var random = Utils.getRandom();
              var div_id = timestamp + random;
              var obj = {
                div_id: div_id,
                id: id,
                type: type,
                unit: unit,
                title: title,
                legend: legend,
                xArr: xArr,
                yArr: yArr,
                dataDetail_columns: dataDetail_columns,
                dataDetail_table: dataDetail_table,
                timelineData: timelineData,
              };
              dataDetail.push(obj);
            }
            _this.dataDetail = dataDetail;
            _this.showCurrentTableData = true;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      asyncOK: function () {
        var _this = this;
        _this.showCurrentTableData = false;
      },
      // 列表多选 选中数据
      selectionChange: function (selection) {
        var _this = this;
        _this.selectionArr = selection;
      },
      // 隐藏编辑页面
      hideAddModal: function () {
        var _this = this;
        _this.addCurrentTableData = false;
      },
      // 显示添加界面
      add: function () {
        var _this = this;
        _this.ajaxType = 'add';
        _this.addCurrentTableData = true;
      },
      // 保存数据
      save: function () {
        var _this = this;
        var content = _this.addData.content;
        var anonymous = _this.addData.anonymous;
        var accessory = _this.addData.accessory;
        if (!(content && content != '')) {
          _this.$Message.error('请填写内容!');
          return false;
        }
        var images = [];
        for (var k in accessory) {
          if (!accessory[k]) {
            continue;
          }
          images.push(accessory[k].id);
        }
        var data = {
          id: _this.id,
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          type: 'suggest',
          anonymous: anonymous,
          content: content,
          images: images,
        };
        var url = '/feedback/add';
        if (_this.ajaxType == 'update') {
          url = '/feedback/update';
        }
        var params = {
          url: url,
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.saveLoading = true;
        function _successFun(res) {
          _this.saveLoading = false;
          if (res.result == 0) {
            _this.page = 1;
            _this.getData();
            _this.addCurrentTableData = false;
            _this.addData.content = '';
            _this.addData.anonymous = false;
            _this.addData.accessory = [];
          } else {
            _this.$Message.error('保存信息失败!');
          }
        }

      },
      // 显示修改界面
      update: function (data, index) {
        var _this = this;
        _this.ajaxType = 'update';
        var id = data.id;
        _this.id = id;
        var data = {
          id: _this.id,
        };
        var params = {
          url: '/feedback/query',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.addData.content = _data.content;
            _this.addData.anonymous = _data.anonymous;
            _this.addData.accessory = _data.image;
            _this.addCurrentTableData = true;
          } else {
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      // 删除
      remove: function () {
        var _this = this;
        var selectionArr = _this.selectionArr;
        if (selectionArr.length == 0) {
          _this.$Message.error('请填选择要删除的数据!');
          return false;
        }
        var selectionIds = [];
        for (var k in selectionArr) {
          if (!selectionArr[k]) {
            continue;
          }
          var id = selectionArr[k].id;
          selectionIds.push(id);
        }
        Modal.confirm(_this, {content: '确定删除选中的信息？'}, function () {
          var data = {
            id: selectionIds,
          };
          var params = {
            url: '/feedback/deleteMultiple',
            type: Util.method.get,
            data: data,
            success: _successFun
          };
          Util.ajax(_this, params);
          function _successFun(res) {
            if (res.result == 0) {
              _this.page = 1;
              _this.getData();
            } else {
              _this.$Message.error('删除信息失败!');
            }
          }
        }, function () {
        });
      },
      // 导出
      ExportData: function () {
        var _this = this;
        var fields = [
          {
            field: 'cname',
            title: '企业名称',
            type: 'varchar',
            order: 1,
          },
          {
            field: 'tax_time',
            title: '纳税时间',
            type: 'datetime',
            order: 2,
          },
          {
            field: 'tax_money',
            title: '纳税总额',
            type: 'varchar',
            order: 3,
          },
          {
            field: 'employees',
            title: '企业人数',
            type: 'varchar',
            order: 4,
          }
        ];
        var fieldsStr = Util.toStr(fields);
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          type: 'tax_records',
          fields: fieldsStr,
        };
        var params = {
          url: '/file/db2excle',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var url = res.data;
            var date = Utils.dateToDateString(new Date());
            Utils.DownloadFile(url, '导出企业纳税信息_' + date + '.xlsx');
          } else {
            _this.$Message.error('导出信息失败!');
          }
        }
      },
      // 导入
      importData: function () {
        var _this = this;
        _this.importDataArr = [];
        _this.ImportDataColumns = [];
        _this.ImportData = [];
        _this.importDataModal = true;
      },
      // 取消导入
      hideImportDataModal: function () {
        var _this = this;
        _this.importDataArr = [];
        _this.ImportDataColumns = [];
        _this.ImportData = [];
        _this.importDataModal = false;
      },
      // 确定导入
      saveImportData: function () {
        var _this = this;
        if (_this.importDataArr.length == 0) {
          _this.$Message.error('请上传附件!');
          return false;
        }
        var file_id = _this.importDataArr[0].id;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          fid: file_id
        };
        var params = {
          url: '/sd/corp/taxes/importExcel',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            _this.page = 1;
            _this.getData();
            _this.hideImportDataModal();
          } else {
            _this.$Message.error('导入信息失败!');
          }
        }
      },
      // 选中文件
      handleUpload: function (file) {
        var _this = this;
        _this.UploadFile(file);
        return false;
      },
      // 上传文件
      UploadFile: function (file) {
        var _this = this;
        var name = file.name;
        var arr = name.split('.');
        var type = arr[1];
        if (type != 'xlsx') {
          _this.$Message.error('请上传xlsx文件!');
          return false;
        }
        var formData = new FormData();
        formData.append("file", file);
        formData.append("action", "UploadVMKImagePath");
        var params = {
          url: '/file/addFile',
          type: Util.method.post,
          data: formData,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data;
            var id = data.id;
            var name = data.name;
            var url = data.url;
            var obj = {
              id: id,
              name: name,
              url: url,
            };
            _this.importDataArr.push(obj);
            _this.getImportData(id);// 预览
          } else {
            _this.$Message.error('上传失败!');
          }
        }
      },
      // 删除附件
      delimportData: function (el) {
        var _this = this;
        var id = el.id;
        var importDataArr = _this.importDataArr;
        for (var k in importDataArr) {
          if (!importDataArr[k]) {
            continue;
          }
          if (id == importDataArr[k].id) {
            var del = importDataArr.splice(k, 1);
            break;
          }
        }
        _this.importDataArr = importDataArr;
        _this.ImportDataColumns = [];
        _this.ImportData = [];
      },
      // 预览数据
      getImportData: function (file_id) {
        var _this = this;
        if (!file_id) {
          return;
        }
        var data = {
          fid: file_id,
          lines: 10,
        };
        var params = {
          url: '/file/exclePreview',
          type: Util.method.get,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data;
            var ImportDataColumns = [];
            var ImportData = [];
            if (_data.length > 0) {
              var Sheet1_data = _data[0].data;
              if (Sheet1_data.length > 0) {
                // 表头
                var titleArr = Sheet1_data[0];
                for (var t in titleArr) {
                  if (!titleArr[t]) {
                    continue;
                  }
                  var col = titleArr[t].col;
                  var title = titleArr[t].title;
                  var Columns = {
                    key: 'key_' + title + '_' + col,
                    title: title,
                    width: 150,
                  };
                  ImportDataColumns.push(Columns);
                }
                // 数据
                for (var k in Sheet1_data) {
                  if (!Sheet1_data[k]) {
                    continue;
                  }
                  var dataObj = {};
                  var dataArr = Sheet1_data[k];
                  for (var r in dataArr) {
                    if (!dataArr[r]) {
                      continue;
                    }
                    var col = dataArr[r].col;
                    var title = dataArr[r].title;
                    var value = dataArr[r].value;
                    var key = 'key_' + title + '_' + col;
                    dataObj[key] = value;
                  }
                  if (Object.keys(dataObj).length > 0) {
                    ImportData.push(dataObj);
                  }
                }
              }
            }
            _this.ImportDataColumns = ImportDataColumns;
            _this.ImportData = ImportData;
          } else {
            _this.$Message.error('预览信息失败!');
          }
        }
      },
    }
  };
</script>
